<template>
  <div class="rechargeRuleSetting-configuration">
    <el-form
      ref="dataForm"
      class="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="140px"
    >
      <div class="deposit_header">费用配置</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="实体卡开卡工本费:" prop="workFeeOne">
            <el-input
              id="workFeeOne"
              v-model="form.workFeeOne"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              @blur="moneyInoutBlur"
            >
              <span slot="append">元</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="虚拟卡开卡工本费:" prop="workFeeTwo">
            <el-input
              id="workFeeTwo"
              v-model="form.workFeeTwo"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              @blur="moneyInoutBlur"
            >
              <span slot="append">元</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单次储值上限:" prop="singleRecharge">
            <el-input
              id="singleRecharge"
              v-model="form.singleRecharge"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              @blur="moneyInoutBlur"
            >
              <span slot="append">元</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="deposit_header">交易配置</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="卡值消费方式:" prop="cardPayWay">
            <el-select v-model="form.cardPayWay" placeholder="请选择">
              <el-option
                v-for="item in CARDPAYWAYOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="线上储值:" prop="onlineWay">
            <el-select v-model="form.onlineWay" placeholder="请选择">
              <el-option
                v-for="item in ONLINEWAYOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交易校验:" prop="checkWay">
            <el-select v-model="form.checkWay" placeholder="请选择">
              <el-option
                v-for="item in CHECKWAYOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="线上支付设置:" prop="onLinePayType">
            <el-select v-model="form.onLinePayType" placeholder="请选择">
              <el-option
                v-for="item in ONLINEPAYTYPEOPTIONS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="deposit_header">消费不适用范围</div>
      <el-row>
        <el-col :span="12">
          <div class="rechargeRuleSetting-configuration_orgSNNo">
            <el-tree-select
              ref="treeSelect"
              v-model="form.noUserOrg"
              :clearable="false"
              class="tree-select"
              :popover-width="360"
              :select-params="{
                clearable: true,
                placeholder: '请选择消费不适用范围',
                loading: $loadingPlugin.getTreeData,
                multiple: true,
                'collapse-tags': true,
              }"
              :tree-params="{
                'default-expand-all': true,
                'expand-on-click-node': false,
                'highlight-current': true,
                'check-strictly': true,
                props: {
                  value: 'orgId',
                  label: 'orgName',
                  disabled: 'disabled',
                },
                data: treeData,
              }"
              @check="handleCheckChange"
              @node-click="selectTreeChange"
            />
            <el-button
              size="mini"
              type="primary"
              @click="add"
            >添加</el-button>
          </div>

          <el-form-item
            prop="noUserOrg"
            class="rechargeRuleSetting-configuration_noUserOrg"
          >
            <el-input v-model="form.noUserOrgText" type="textarea" :rows="6" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="rechargeRuleSetting-btn">
      <el-button type="primary" @click="save">保存设置</el-button>
    </div>
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { csmcardconfigQuery, csmcardconUpdate } from '@/api'
  import {
    CARDPAYWAYOPTIONS,
    ONLINEWAYOPTIONS,
    CHECKWAYOPTIONS,
    ONLINEPAYTYPEOPTIONS
  } from './config'
  export default {
    data() {
      return {
        CARDPAYWAYOPTIONS,
        ONLINEWAYOPTIONS,
        CHECKWAYOPTIONS,
        ONLINEPAYTYPEOPTIONS,
        form: {
          workFeeOne: '', // 实体卡工本费
          workFeeTwo: '', // 虚拟卡工本费
          singleRecharge: '', // 单次储值上限
          cardPayWay: '', // 卡值消费方式(1:表示先现金2:表示先赠送)
          onlineWay: '', // 线上储值方式(1:开通;2:不开通)
          checkWay: '', // 交易校验(1:无校验；2:仅密码校验;3:仅验证码校验；4:密码和验证码均可校验)
          noUserOrg: [], // 消费不适用范围
          onLinePayType: '', // 线上支付设置PAY_ALL(1, "所有关联微信均可支付"),     PAY_PHONE(2, "仅允许绑定手机号关联的微信支付");
          noUserOrgText: ''
        },
        rules: {
          noUserOrg: [
            { required: true, message: '请选择消费不适用范围', trigger: 'change' }
          ],
          workFeeOne: [
            { required: true, message: '请输入实体卡工本费', trigger: 'change' }
          ],
          workFeeTwo: [
            { required: true, message: '请输入虚拟卡工本费', trigger: 'change' }
          ],
          singleRecharge: [
            { required: true, message: '请输入单次储值上限', trigger: 'change' }
          ],
          cardPayWay: [
            { required: true, message: '请选择卡值消费方式', trigger: 'change' }
          ],
          onlineWay: [{ required: true, message: '请选择线上储值方式', trigger: 'change' }],
          checkWay: [{ required: true, message: '请选择交易校验', trigger: 'change' }],
          onLinePayType: [
            { required: true, message: '请选择线上支付设置', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['orgList'])
    },
    async created() {
      await this.getTreeData()
    },
    mounted() {
      this.getCsmcardconfigData()
    },
    methods: {
      // 获取适用机构数据
      async getTreeData() {
        const data = this.orgList.map((item) => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      handleCheckChange(value) {
      },
      selectTreeChange(value) {},
      // 金额输入框失去焦点保留2位小数
      moneyInoutBlur(e) {
        const key = e.target.id
        this.form[key] = ((this.form[key] * 100) / 100).toFixed(2)
      },
      // 添加不适用范围
      add() {
        this.form.noUserOrgText = this.$refs['treeSelect'].labels.toString()
      },
      // 获取充值规则设置
      async getCsmcardconfigData() {
        const { status, data } = await csmcardconfigQuery()
        if (status === 200) {
          // 设置默认值
          for (const key in this.form) {
            const moneyKey = ['workFeeOne', 'workFeeTwo', 'singleRecharge']
            if (moneyKey.includes(key)) {
              this.form[key] = (data[key] / 100).toFixed(2)
            } else if (key === 'noUserOrg') {
              this.form[key] = data[key].split(',')
            } else {
              this.form[key] = data[key]
            }
          }
          // 设置
          this.$nextTick(() => {
            this.form.noUserOrgText = this.$refs['treeSelect'].labels.toString()
          })
        }
      },
      // 提交配置
      save() {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) return
          this.submit()
        })
      },
      async submit() {
        // let params = JSON.parse(JSON.stringify(this.form))
        // params.noUserOrg = params.noUserOrg.toString()
        const params = {
          workFeeOne: Number(this.form.workFeeOne) * 100, // 实体卡工本费
          workFeeTwo: Number(this.form.workFeeTwo) * 100, // 虚拟卡工本费
          singleRecharge: Number(this.form.singleRecharge) * 100, // 单次储值上限
          cardPayWay: this.form.cardPayWay, // 卡值消费方式(1:表示先现金2:表示先赠送)
          onlineWay: this.form.onlineWay, // 线上储值方式(1:开通;2:不开通)
          checkWay: this.form.checkWay, // 交易校验(1:无校验；2:仅密码校验;3:仅验证码校验；4:密码和验证码均可校验)
          noUserOrg: this.form.noUserOrg.toString(), // 消费不适用范围
          onLinePayType: this.form.onLinePayType // 线上支付设置PAY_ALL(1, "所有关联微信均可支付"),     PAY_PHONE(2, "仅允许绑定手机号关联的微信支付");
        }

        const { status } = await csmcardconUpdate(params)
        if (status === 200) {
          this.$notify({
            title: '提示',
            message: '信息保存成功',
            type: 'success',
            duration: 2000
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.rechargeRuleSetting-configuration {
  /deep/.el-select {
    width: 100%;
  }

  .deposit_header {
    margin: 15px;
    font-size: 14px;
    font-weight: bold;
  }
  /deep/.el-row {
    padding-left: 50px;
  }
  .rechargeRuleSetting-configuration_noUserOrg {
    /deep/.el-form-item__content {
      margin-left: 0 !important;
    }
  }
  .rechargeRuleSetting-configuration_orgSNNo {
    display: flex;
    margin-bottom: 10px;

    .tree-select {
      margin-right: 10px;
    }
  }
  .rechargeRuleSetting-btn {
    padding-top: 50px;
    text-align: center;
  }
}
</style>
